<template>
  <div class="content-box">
    <div class="content-box-title" >
      <el-header>
        <el-row  style="display:flex;align-items:center;width: 100%;border-bottom: 1px solid #cccccc;padding:9px 0 8px 0">
          <el-col :span="12">
            {{title}}
          </el-col>
          <el-col :span="12">
            <div style="text-align: right">
              <el-button-group>
                <el-button type="primary" >保存</el-button>
                <el-button type="primary" >保存并返回</el-button>
                <el-button @click="routeBack">返回</el-button>
              </el-button-group>
            </div>
          </el-col>
        </el-row>
      </el-header>
    </div>
    <el-form :data="formData" class="content-box-main" label-suffix="：" style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="菜单名称">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="路由地址">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上级菜单">
            <el-input v-model="formData.parentId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="菜单图标">
            <el-popover ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="popover-pop mod-sys__menu-icon-popover" width="465">
              <template v-slot:reference> <el-input v-model="formData.icon" :readonly="true" placeholder="图标"></el-input></template>
              <div class=" mod-sys__menu-icon-inner">
                <div class=" mod-sys__menu-icon-list">
                  <el-button v-for="(item, index) in iconList" :key="index" @click="iconListCurrentChangeHandle(item)" :class="{ 'is-active': formData.icon === item }">
                    <svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${item}`"></use></svg>
                  </el-button>
                </div>
              </div>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="菜单编号">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="菜单类型">
            <el-select v-model="formData.type">
              <el-option label="菜单" value="1"></el-option>
              <el-option label="按钮" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="菜单别名">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="新窗口">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="子系统名称">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否启用">
            <el-input v-model="formData.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="菜单排序">
            <el-input-number v-model="formData.sort" min="1" step="1" controls-position="right"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import IconSelect from "@/components/iconSelect.vue";
import {getIconList} from '@/utils/utils'
import {useRoute, useRouter} from "vue-router";
const route = useRoute()
const router = useRouter()
const title = ref('')
const formData = reactive({

})
onMounted(()=>{
  const {id,type} = route.query
  if (type === 'addChild'){
    title.value='新增菜单子项'
  }else{
    title.value = '编辑菜单信息'
  }
  iconList.value = getIconList();
})
const selectedIcon = (data)=>{
  console.log(data)
}

const iconList = ref([])
const iconListPopover = ref();
const iconListCurrentChangeHandle = (icon) => {
  formData.icon = icon;
  iconListPopover.value.hide();
};
const routeBack = ()=>{
  router.go(-1)
}
</script>

<style scoped lang="scss">
.content-box{
  padding: 10px;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  .content-box-title{
    height: 50px;

    .title-info-box{
      flex: 1;
    }

    .btn-box{
      width: 100px;
    }
  }
  .content-box-main{
    flex-grow: 1;
  }
}


.iconfont {
  cursor: pointer;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: text-bottom;
  display: inline-block;
  fill: currentColor;
  width: 17px;
  height: 17px;
}
.icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
.el-popover.el-popper {
  overflow-x: hidden
}

.mod-sys__menu .menu-list .el-input__inner,.mod-sys__menu .icon-list .el-input__inner,.mod-sys__menu .menu-list .el-input__suffix,.mod-sys__menu .icon-list .el-input__suffix {
  cursor: pointer
}

.mod-sys__menu-icon-popover {
  width: 458px!important;
  overflow-y: hidden!important
}

.mod-sys__menu-icon-inner {
  width: 100%;
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto
}

.mod-sys__menu-icon-list {
  width: 458px!important;
  padding: 0;
  margin: -8px 0 0 -8px
}

.mod-sys__menu-icon-list>.el-button {
  padding: 8px;
  margin: 8px 0 0 8px
}

.mod-sys__menu-icon-list>.el-button>span {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  font-size: 18px
}

</style>
